<template>
  <div class="video-detail" v-title :data-title="$t('router.videoDetailTitle')">
    <Breadcrumb></Breadcrumb>
    <div class="main">
      <div class="content">
        <h1
          class="ellipsis"
          v-text="
            $i18n.locale === 'zh'
              ? playInfos.cname || playInfos.name
              : playInfos.name
          "
        ></h1>
        <div class="vPlayer">
          <videoplayer
            v-if="mp4Url"
            ref="myChild"
            :mp4Url="mp4Url"
            :newMp4Url="newMp4Url"
            :mp4Pic="playInfos.imgUrl"
            :islike="playInfos.likeState"
            @toggleQuality="toggleQuality"
          ></videoplayer>
          <div v-else></div>
          <div class="vPlayerInfo">
            <el-collapse v-model="activePart" @change="handleChange" accordion>
              <el-collapse-item
                v-for="(item, name) in newSections"
                :key="name"
                :title="'Part' + name"
                :name="name"
                class="info-box"
              >
                <ul>
                  <h3>{{ $t("main.worksName") }}</h3>
                  <li
                    v-for="item of sections(name, 'Work')"
                    @click="partToggle(item, item.sectionId, name)"
                    :class="item.sectionId == sectionIndex ? 'active' : ''"
                    :key="item.sectionId"
                    v-text="
                      $i18n.locale === 'zh'
                        ? item.cname || item.name
                        : item.name
                    "
                    :title="
                      $i18n.locale === 'zh'
                        ? item.cname || item.name
                        : item.name
                    "
                  ></li>
                  <li v-show="sections(name, 'Work').length === 0">
                    {{ $t("public.noInformation") }}
                  </li>
                  <h3>{{ $t("main.titleName") }}</h3>
                  <li
                    v-for="item of sections(name, 'Heading')"
                    @click="partToggle(item, item.sectionId, name)"
                    :class="item.sectionId == sectionIndex ? 'active' : ''"
                    :key="item.sectionId"
                    v-text="
                      $i18n.locale === 'zh'
                        ? item.cname || item.name
                        : item.name
                    "
                    :title="
                      $i18n.locale === 'zh'
                        ? item.cname || item.name
                        : item.name
                    "
                  ></li>
                  <li v-show="sections(name, 'Heading').length === 0">
                    {{ $t("public.noInformation") }}
                  </li>
                  <h3>{{ $t("main.chapterName") }}</h3>
                  <li
                    v-for="item of sections(name, 'Chapter')"
                    @click="partToggle(item, item.sectionId, name)"
                    :class="item.sectionId == sectionIndex ? 'active' : ''"
                    :key="item.sectionId"
                    v-text="
                      $i18n.locale === 'zh'
                        ? item.cname || item.name
                        : item.name
                    "
                    :title="
                      $i18n.locale === 'zh'
                        ? item.cname || item.name
                        : item.name
                    "
                  ></li>
                  <li v-show="sections(name, 'Chapter').length === 0">
                    {{ $t("public.noInformation") }}
                  </li>
                </ul>
              </el-collapse-item>
            </el-collapse>
          </div>
          <!-- <div class="vPlayerInfo">
            <h2>Part1</h2>
            <ul v-if="this.playInfos.sections !== undefined">
              <h3>{{ $t("main.worksName") }}</h3>
              <li
                v-for="(item, index) of sections('Work')"
                @click="partToggle(item, index)"
                :class="index == sectionIndex ? 'active' : ''"
                :key="item.sectionId"
                v-text="
                  $i18n.locale === 'zh' ? item.cname || item.name : item.name
                "
                :title="
                  $i18n.locale === 'zh' ? item.cname || item.name : item.name
                "
              ></li>
              <li v-show="sections('Work').length === 0">
                {{ $t("public.noInformation") }}
              </li>
              <h3>{{ $t("main.titleName") }}</h3>
              <li
                v-for="(item, index) of sections('Heading')"
                @click="partToggle(item, index)"
                :class="index == headIndex ? 'active' : ''"
                :key="item.sectionId"
                v-text="
                  $i18n.locale === 'zh' ? item.cname || item.name : item.name
                "
                :title="
                  $i18n.locale === 'zh' ? item.cname || item.name : item.name
                "
              ></li>
              <li v-show="sections('Heading').length === 0">
                {{ $t("public.noInformation") }}
              </li>
              <h3>{{ $t("main.chapterName") }}</h3>
              <li
                v-for="(item, index) of sections('Chapter')"
                @click="partToggle(item, index)"
                :class="index == chapterIndex ? 'active' : ''"
                :key="item.sectionId"
                v-text="
                  $i18n.locale === 'zh' ? item.cname || item.name : item.name
                "
                :title="
                  $i18n.locale === 'zh' ? item.cname || item.name : item.name
                "
              ></li>
              <li v-show="sections('Chapter').length === 0">
                {{ $t("public.noInformation") }}
              </li>
            </ul>
          </div> -->
        </div>
      </div>
    </div>
    <el-tabs class="box tab-content" v-model="activeName">
      <el-tab-pane
        :label="$t('main.programIntroduction')"
        name="first"
        class="first"
        v-if="playInfos.blurb || playInfos.cblurb"
      >
        <p
          :class="isIntroduce ? '' : 'ellipsis-two'"
          v-html="
            $i18n.locale === 'zh'
              ? playInfos.cblurb || playInfos.blurb
              : playInfos.blurb || playInfos.cblurb
          "
        ></p>
        <div
          class="unfold"
          v-show="playInfos.blurb"
          @click="isIntroduce = !isIntroduce"
        >
          <i :class="isIntroduce ? 'el-icon-minus' : 'el-icon-plus'"></i>
          {{ isIntroduce ? $t("main.putAway") : $t("main.open") }}
        </div>
      </el-tab-pane>
      <el-tab-pane
        :label="$t('main.performanceInformation')"
        name="second"
        class="second"
      >
        <ul v-loading="fullscreenLoading" class="ul-list">
          <li>
            <span>{{ $t("main.performer") }}：</span>
            <p v-if="performer(1) && performer(1).length > 0">
              <span v-for="item of performer(1)" :key="item.id">{{
                $i18n.locale === "zh"
                  ? item.fullCname ||
                    item.fullName ||
                    item.lastName ||
                    item.firstName ||
                    item.stageName
                  : item.fullName ||
                    item.lastName ||
                    item.firstName ||
                    item.stageName
              }}</span>
              <!-- <span to="" v-for="item of playInfos.performer | performer(1)" :key="item.id">{{$i18n.locale === 'zh' ? item.fullCname : item.fullName}},{{item.stageName}}</span> -->
            </p>
            <p v-else v-text="$t('public.noInformation')"></p>
          </li>
          <li>
            <span>{{ $t("main.lyrics") }}：</span>
            <p v-if="performer(6) && performer(6).length > 0">
              <span v-for="item of performer(6)" :key="item.id">{{
                $i18n.locale === "zh"
                  ? item.fullCname ||
                    item.fullName ||
                    item.lastName ||
                    item.firstName ||
                    item.stageName
                  : item.fullName ||
                    item.lastName ||
                    item.firstName ||
                    item.stageName
              }}</span>
            </p>
            <p v-else v-text="$t('public.noInformation')"></p>
          </li>
          <li>
            <span>{{ $t("main.arranger") }}：</span>
            <p v-if="performer(7) && performer(7).length > 0">
              <span v-for="item of performer(7)" :key="item.id">{{
                $i18n.locale === "zh"
                  ? item.fullCname ||
                    item.fullName ||
                    item.lastName ||
                    item.firstName ||
                    item.stageName
                  : item.fullName ||
                    item.lastName ||
                    item.firstName ||
                    item.stageName
              }}</span>
            </p>
            <p v-else v-text="$t('public.noInformation')"></p>
          </li>
          <li>
            <span>{{ $t("public.composer") }}：</span>
            <p v-if="performer(8) && performer(8).length > 0">
              <span v-for="item of performer(8)" :key="item.id">{{
                $i18n.locale === "zh"
                  ? item.fullCname ||
                    item.fullName ||
                    item.lastName ||
                    item.firstName ||
                    item.stageName
                  : item.fullName ||
                    item.lastName ||
                    item.firstName ||
                    item.stageName
              }}</span>
            </p>
            <p v-else v-text="$t('public.noInformation')"></p>
          </li>
          <li>
            <span>{{ $t("main.command") }}：</span>
            <p v-if="performer(9) && performer(9).length > 0">
              <span v-for="item of performer(9)" :key="item.id">{{
                $i18n.locale === "zh"
                  ? item.fullCname ||
                    item.fullName ||
                    item.lastName ||
                    item.firstName ||
                    item.stageName
                  : item.fullName ||
                    item.lastName ||
                    item.firstName ||
                    item.stageName
              }}</span>
            </p>
            <p v-else v-text="$t('public.noInformation')"></p>
          </li>
          <li>
            <span>{{ $t("main.choir") }}：</span>
            <p v-if="performer(10) && performer(10).length > 0">
              <span v-for="item of performer(10)" :key="item.id">{{
                $i18n.locale === "zh"
                  ? item.fullCname ||
                    item.fullName ||
                    item.lastName ||
                    item.firstName ||
                    item.stageName
                  : item.fullName ||
                    item.lastName ||
                    item.firstName ||
                    item.stageName
              }}</span>
            </p>
            <p v-else v-text="$t('public.noInformation')"></p>
          </li>
          <li>
            <span>{{ $t("main.ensemble") }}：</span>
            <p v-if="performer(11) && performer(11).length > 0">
              <span v-for="item of performer(11)" :key="item.id">{{
                $i18n.locale === "zh"
                  ? item.fullCname ||
                    item.fullName ||
                    item.lastName ||
                    item.firstName ||
                    item.stageName
                  : item.fullName ||
                    item.lastName ||
                    item.firstName ||
                    item.stageName
              }}</span>
            </p>
            <p v-else v-text="$t('public.noInformation')"></p>
          </li>
          <li>
            <span>{{ $t("main.philharmonicOrchestra") }}：</span>
            <p v-if="performer(12) && performer(12).length > 0">
              <span v-for="item of performer(12)" :key="item.id">{{
                $i18n.locale === "zh"
                  ? item.fullCname ||
                    item.fullName ||
                    item.lastName ||
                    item.firstName ||
                    item.stageName
                  : item.fullName ||
                    item.lastName ||
                    item.firstName ||
                    item.stageName
              }}</span>
            </p>
            <p v-else v-text="$t('public.noInformation')"></p>
          </li>
        </ul>
      </el-tab-pane>
      <el-tab-pane
        :label="$t('main.festivalInformation')"
        name="third"
        class="third"
      >
        <ul>
          <li>
            <span>{{ $t("main.issueDate") }}：</span>
            <p>
              {{
                utils.formateDate(playInfos.releaseDate) ||
                $t("public.noInformation")
              }}
            </p>
          </li>
          <li>
            <span>{{ $t("main.place") }}：</span>
            <p>{{ playInfos.venue || $t("public.noInformation") }}</p>
          </li>
          <li>
            <span>{{ $t("main.duration") }}：</span>
            <p>{{ playInfos.duration || $t("public.noInformation") }}</p>
          </li>
          <li>
            <span>{{ $t("main.number") }}：</span>
            <p>{{ playInfos.upc || $t("public.noInformation") }}</p>
          </li>
          <li>
            <span>{{ $t("public.brand") }}：</span>
            <p>{{ playInfos.labelId || $t("public.noInformation") }}</p>
          </li>
        </ul>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import Breadcrumb from "@/components/common/Breadcrumb/Index";
import videoplayer from "@/components/common/videoPlayer/Index";
export default {
  data() {
    return {
      mp4Url: "",
      newMp4Url: "",
      // http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4
      //"https://juyuan.kuke.com/1625711809561/5bd3ad81f9442eb7042cb27ac2927e9b/mp4/video/700kbps/33468.700kb.part1.mp4",
      sectionIndex: null, //作品名称active
      activeName: "first",
      isIntroduce: false, //节目介绍-是否展开
      playInfos: {}, //视频详情数据
      fullscreenLoading: false,
      quality: "700", //清晰度
      newSections: {}, //处理后的节点信息
      activeSections: null,
      activePart: null,
    };
  },
  components: {
    Breadcrumb,
    videoplayer,
  },
  // filters: {
  //   performer(val, id) {
  //     if (val) {
  //       let obj = val.find((item) => item.personTypeId == id);
  //       for (let i in obj.personIds.split(",")) {
  //         obj.persons[i].id = obj.personIds.split(",")[i];
  //       }
  //       return obj.persons;
  //     }
  //   },
  // },
  watch: {},
  created() {
    this.partToggle();
  },
  mounted() {
    this.getDetail();
  },
  methods: {
    // 手风琴改变事件
    async handleChange(val) {
      if (val && val != this.activeSections) {
        // this.activeSections = val;
        await this.partToggle(true, 0, val);
        this.$nextTick(() => {
          this.$refs.myChild.onPlay();
        });
      }
    },
    compareTime(key) {
      return function (value1, value2) {
        let val1 = value1[key].split(":").join("");
        let val2 = value2[key].split(":").join("");
        return val1 - val2;
      };
    },
    compareType(type) {
      return function (value1, value2) {
        let val1 = value1[type];
        let val2 = value2[type];
        if (value1.startTime === value2.startTime) {
          if (val1 === "Work" || val1 === "Heading") {
            return -1;
          } else if (val2 === "Work" || val2 === "Heading") {
            return 1;
          } else {
            return 0;
          }
        }
      };
    },
    //获取演奏信息列表- 并把对应id添加到演奏者上
    performer(id) {
      if (this.playInfos.performer) {
        let obj = this.playInfos.performer.find(
          (item) => item.personTypeId == id
        );
        if (obj) {
          // id 赋值
          // for (let i in obj.personIds.split(",")) {
          //   obj.persons[i].id = obj.personIds.split(",")[i];
          // }
          if (obj.persons.length > 0) {
            return obj.persons;
          } else {
            return false;
          }
        } else {
          return false;
        }
      }
    },
    //获取片段列表
    sections(key, type) {
      let arr = [];
      this.newSections[key].find((item) => {
        if (item.type == type) {
          arr.push(item);
        }
      });
      return arr;
    },
    // 切换视频清晰度
    async toggleQuality(quality) {
      let time = +new Date();
      let params = {
        videoId: this.$route.params.id,
        quality,
        partNo: this.activeSections,
        time: time,
      };
      let res = await this.$api.user.videoAddress(params);
      this.$refs.myChild.player.src(res.data);
    },
    //作品名称片段
    async partToggle(val, idx, key) {
      // 检测用户权限
      let allow;
      if (this.$store.getters.loginStatu) {
        let videoParams = {
          token: this.$store.getters.userInfo.token,
          moduleId: 557, // 视频模块id
          contentId: this.$route.params.id,
          reportFlag: 1
        };
        allow = await this.$api.user.checkUserPermissions(videoParams);
      } else {
        let videoParams = {
          moduleId: 557, // 视频模块id
          contentId: this.$route.params.id,
          reportFlag:1
        };
        allow = await this.$api.user.checkUserPermissionsByIp(videoParams);
      }
      if (allow.code === 1000000) {
        if (val) {
          this.sectionIndex = idx;
          if (key == this.activeSections) {
            this.$refs.myChild.toTime(val.startTime);
            this.$nextTick(() => {
              this.$refs.myChild.onPlay();
            });
            return;
          } else {
            this.activeSections = key;
          }
        } else {
          this.sectionIndex = null;
          this.activeSections = this.activePart = "1"; //默认Part1
        }
        let time = +new Date();
        let params = {
          videoId: this.$route.params.id,
          quality: this.quality,
          partNo: this.activeSections,
          time: time,
        };
        let res = await this.$api.user.videoAddress(params);
        this.mp4Url = res.data;
        // if (val) this.$refs.myChild.toTime(val.startTime);
        // this.$nextTick(() => {
        //   this.$refs.myChild.onPlay();
        // });
      } else if (allow.code === 1701101) {
        this.$notify({
          title: this.$t("public.warning"),
          message: this.$t("public.accountNotExist"),
          type: "warning",
          offset: 100,
        });
      } else if (allow.code === 1701102) {
        this.$notify({
          title: this.$t("public.warning"),
          message: this.$t("public.validityExpired"),
          type: "warning",
          offset: 100,
        });
      } else if (allow.code === 1701103) {
        this.$notify({
          title: this.$t("public.warning"),
          message: this.$t("public.organizationValidityExpires"),
          type: "warning",
          offset: 100,
        });
      } else if (allow.code === 1701104) {
        this.$notify({
          title: this.$t("public.warning"),
          message: this.$t("public.organizationVideoExpired"),
          type: "warning",
          offset: 100,
        });
      }
    },
    //获取视频详情页数据
    async getDetail() {
      this.fullscreenLoading = true;
      try {
        let params = {
          videoId: this.$route.params.id,
        };
        let res = await this.$api.video.getVideoInfo(params);
        if (res.code === 1000000) {
          this.playInfos = res.source ? res.source : {};
          let obj = {};
          res.source.sections.forEach((item) => {
            if (Object.keys(obj).indexOf("" + item.discNum) === -1) {
              obj[item.discNum] = [];
            }
            obj[item.discNum].push(item);
          });
          Object.keys(obj).forEach((key) => {
            obj[key]
              .sort(this.compareTime("startTime"))
              .sort(this.compareType("type"));
          });
          this.newSections = obj;
          this.fullscreenLoading = false;
        }
      } catch (e) {
        console.log(e);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.video-detail {
  .main {
    width: 100%;
    height: 645px;
    background: #333333;
    position: absolute;
    left: 0;
    .content {
      width: 1200px;
      margin: auto;
      > h1 {
        height: 72px;
        font-size: 22px;
        line-height: 77px;
        color: #fff;
      }
      .vPlayer {
        display: flex;
        justify-content: space-between;
        .vPlayerInfo {
          width: 240px;
          height: 517px;
          overflow-y: auto;
          background: rgba(255, 255, 255, 0.1);
          .el-collapse {
            border-width: 0;
            .info-box {
              ::v-deep .el-collapse-item__header {
                border-width: 0;
                background-color: #999999;
                padding: 0 14px;
                font-weight: bold;
              }
              ::v-deep .el-collapse-item__wrap {
                background-color: rgba(255, 255, 255, 0);
                border-width: 0;
                .el-collapse-item__content {
                  ul {
                    > h3 {
                      color: #fff;
                      font-size: 18px;
                      margin: 16px 0 10px 14px;
                    }
                    > li {
                      line-height: 38px;
                      padding-left: 24px;
                      font-size: 16px;
                      color: #fff;
                      overflow: hidden;
                      text-overflow: ellipsis;
                      white-space: nowrap;
                      cursor: pointer;
                      &.active {
                        background: #000;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .tab-content {
    margin-top: 680px;
    .el-tabs__content {
      .el-tab-pane {
        margin-top: 8px;
        > ul {
          > li {
            display: flex;
            align-items: flex-start;
            margin-bottom: 16px;
            line-height: 26px;
            color: #000;
            > span {
              white-space: nowrap;
            }
            p {
              display: flex;
              flex-wrap: wrap;
              > span {
                margin-right: 18px;
              }
            }
          }
        }
        .unfold {
          color: #999999;
          font-size: 16px;
          margin-top: 8px;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
